import React, { Component } from 'react'
import {
  BrowserRouter as Router,
  Link,
  Route,
  useLocation,
  Switch,
  Redirect,
  NavLink
} from 'react-router-dom'
import Movie from './Movie'
import Theater from './Theater'
import "./Index.style.css"

const Video = () => {
  let obj = new URLSearchParams(useLocation().search)
  return <h1>视频页面,city:{obj.get('city')}</h1>;
}

const Page404 = () => {
  return (
    <h1>页面404</h1>
  )
}

export default class Index extends Component {
  render() {
    return (
      <div>
        <Router>
          <NavLink activeClassName="active" to="/movie">电影</NavLink>
          &nbsp;
          <NavLink activeClassName="active"  to="/theater/66">影院</NavLink>
          &nbsp;
          <NavLink activeClassName="active"  to="/video?city=taiyuan&id=100">视频</NavLink>
          &nbsp;
          <NavLink activeClassName="active"  to="/aaaa">404</NavLink>
          {/* 排他性 */}
          <Switch>
            {/* <Route path="/:id"  >
              <h1>默认页面</h1>
            </Route> */}

            <Route path="/movie" component={Movie} >
              {/* <h1>电影页面</h1> */}
            </Route>

            <Route path="/theater/:id" component={Theater} >
              {/* <h1>影院页面</h1> */}
            </Route>

            <Route path="/video" >
              {/* <h1>视频页面</h1> */}
              {<Video></Video>}
            </Route>

            <Redirect exact to="/movie/hotshowing" from="/"></Redirect>

            <Route path="*">
              <Page404></Page404>
            </Route>

          </Switch>
        </Router>




      </div>
    )
  }
}
